<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>GreenBeeAdmin-登录</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="referrer" content="no-referrer" />

<link rel="stylesheet" href="/static/layui/css/layui.css">
<script charset="utf-8" src="/static/layui/layui.js"></script>
<script charset="utf-8" src="/static/js/jquery-3.1.1.min.js" ></script>
<script src="/static/js/jquery.color.min.js"></script>
</head>
<style>
.login-main{width: 100%;height:100%;position: relative;animation-name: mainanim;animation-duration: 8s;animation-iteration-count: infinite;background:#009688;}
.login-layout{width: 540px;height: 310px;position: absolute;top:50%;left: 50%;margin-top: -155px ;margin-left: -270px;background: #FFFFFF;border-radius: 4px;z-index: 99; box-shadow: 0px 0px 5px #FFFFFF}
.login-input{width: 90%;}

.verify_code{padding:0px 0px;}
</style>
<body>
<div class="login-main">
<div class="login-layout">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px;text-align: center">
    <legend>登录</legend>
</fieldset>
<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label">账号：</label>
        <div class="layui-input-block">
            <input type="text" name="account" lay-verify="account" autocomplete="off" placeholder="请输入您的账号" class="layui-input login-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="password"  placeholder="请输入您的密码" autocomplete="off" class="layui-input login-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证码：</label>
            <div class="layui-input-inline">
                <input type="text" name="code" lay-verify="code" autocomplete="off" placeholder="验证码" class="layui-input">
            </div>
			<input type="hidden" name="verifycode_id" id="verifycode_id" value="">
            <label class="layui-form-label verify_code" ><img id="verify_code_img" width="120px" height="50px" src=""></label>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn"  id="login_submit">立即登录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</div>
</div>
<script>
(function () {
    //背景颜色渐变动画
	let color_array = ["#458994","#228922","#6BC235","#009688"];
	let color_no = 0;
	let animate_time = 2500;
	function random_bg_color(color_no){
		if(color_no > 3) color_no = 0;
		let color = color_array[color_no]
		color_no++
		$(".login-main").animate({
			backgroundColor: color
		},animate_time,function(){
			//alert("样式变换");
			random_bg_color(color_no)
		});
		
	}
	setTimeout(random_bg_color(color_no), animate_time);//定时器
	
	//获取验证码图片
	function get_verifycode_pic(){
		$.get("/page/getVerifyCode", {},
        function(data){
			
			if(data.code == 1){
				$("#verify_code_img").attr("src",data.captcha_img)
				$("#verifycode_id").val(data.captcha_id);
			}
		},"json");
	}
	//初始化验证码
	get_verifycode_pic();
	//验证码
	$("#verify_code_img").click(function(){
		get_verifycode_pic();
	});
	
	
})();

//初始化组件
layui.config({
	base : "js/"
}).use(['form','layer','jquery'],function(){
	$ = layui.jquery;
	//登陆
	$("#login_submit").click(function(){
		let username = $('input[name="account"]').val();
		let password = $('input[name="password"]').val();
		let verifycode = $('input[name="code"]').val();
		let verifycode_id = $('input[name="verifycode_id"]').val();
		
		$.post("/admin/login", {"username":username,"password":password,"verifycode":verifycode,"verifycode_id":verifycode_id},
        function(data){
			
			if(data.code == 200){
				layer.msg("登陆成功",{
					time:2000,
					end:function(){
						location.href="/admin"
					}
				});
				
			}else{
				layer.msg(data.msg);
			}
		},"json");
		
	});
});
</script>
</body>
</html>